import React, { PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {

    state = {
        userName: 'jerry',
        age: 18
    }

    changeUser = () => {
        this.setState({userName: 'tom'})
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     if (this.state.userName === nextState.userName) {
    //         return false
    //     } else {
    //         return true
    //     }
    // }

    render() {
        const {userName} = this.state
        console.log('@@parent@@')
        return (
            <div className='aContainer'>
                <h3>Parent组件</h3>
                <h4>用户名：{userName}</h4>
                <button onClick={this.changeUser}>换人</button>
                <Child userName="奥拓"/>
            </div>
        )
    }
}

class Child extends PureComponent {

    // shouldComponentUpdate(nextProps) {
    //     if (this.props.userName === nextProps.userName) {
    //         return false
    //     } else {
    //         return true
    //     }
    // }
    
    render() {
        const {userName} = this.props
        console.log('@@child@@')
        return (
            <div className='bContainer'>
                <h3>Child组件</h3>
                <h4>从A组件接收到数据：{userName}</h4>
            </div>
        )
    }
}
